<template>
    <!-- 系统设置信息展示组件 -->
    <div class="form-panel">
        <el-form :model="formData" :rules="rules" ref="formDataRef" label-width="160px" @submit.prevent>
            <el-form-item label="最多可创建群组数" prop="maxGroupCount">
                <el-input clearable placeholder="请输入每人最多可创建群组数" v-model.trim="formData.maxGroupCount"></el-input>
            </el-form-item>
            <el-form-item label="群组最大成员数" prop="maxGroupMemberCount">
                <el-input clearable placeholder="请输入每个群组最大成员数" v-model.trim="formData.maxGroupMemberCount"></el-input>
            </el-form-item>
            <el-form-item label="图片大小" prop="maxImageSize">
                <el-input clearable placeholder="请输入允许上传的图片大小" v-model.trim="formData.maxImageSize">
                    <template #append>MB</template>
                </el-input>
            </el-form-item>
            <el-form-item label="视频大小" prop="maxVideoSize">
                <el-input clearable placeholder="请输入允许上传的视频大小" v-model.trim="formData.maxVideoSize">
                    <template #append>MB</template>
                </el-input>
            </el-form-item>

            <el-form-item label="其他文件大小" prop="maxFileSize">
                <el-input clearable placeholder="请输入允许上传的文件大小" v-model.trim="formData.maxFileSize">
                    <template #append>MB</template>
                </el-input>
            </el-form-item>
            <el-form-item label="单次最大发送文件数" prop="maxFileCount">
                <el-input clearable placeholder="请输入聊天时单次最大能发送的文件数" v-model.trim="formData.maxFileCount"></el-input>
            </el-form-item>
            <el-form-item label="机器人昵称" prop="robotNickName">
                <el-input clearable placeholder="请输入机器人昵称" v-model.trim="formData.robotNickName"
                    maxlength="20"></el-input>
            </el-form-item>
            <el-form-item label="机器人头像" prop="avatarFile">
                <AvatarUpload v-model="formData.avatarFile" @avatarCover="saveCover"></AvatarUpload>
            </el-form-item>
            <el-form-item label="机器人默认欢迎消息" prop="robotWelcomeMsg">
                <el-input clearable placeholder="请输入新用户注册机器人欢迎消息" v-model="formData.robotWelcomeMsg" type="textarea"
                    :rows="5" maxlength="300" :show-word-limit="true" resize="none"></el-input>
            </el-form-item>
            <el-form-item label="机器人默认回复消息" prop="robotDefaultReply">
                <el-input clearable placeholder="请输入机器人默认回复消息" v-model="formData.robotDefaultReply" type="textarea"
                    :rows="5" maxlength="300" :show-word-limit="true" resize="none"></el-input>
            </el-form-item>
            <el-form-item label="">
                <el-button type="primary" @click="saveSysSetting">保存设置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import AvatarUpload from "@/components/AvatarUpload.vue";
import { ref, reactive, getCurrentInstance, nextTick, watch } from "vue"
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

const validateNumber = (rule, value, callback) => {
    if (!proxy.Verify.checkNumber(value)) {
        callback(new Error('只能是数字'))
    }
    else {
        callback();
    }
}

const formData = ref({});
const formDataRef = ref();
const rules = {
    maxGroupCount: [
        { required: true, message: '请输入每人最多可创建群组数' },
        { validator: validateNumber, message: '只能是数字' }
    ],
    maxGroupMemberCount: [
        { required: true, message: '请输入每个群组最大成员数' },
        { validator: validateNumber, message: '只能是数字' }
    ],
    maxImageSize: [
        { required: true, message: '请输入允许上传的图片大小' },
        { validator: validateNumber, message: '只能是数字' }
    ],
    maxVideoSize: [
        { required: true, message: '请输入允许上传的视频大小' },
        { validator: validateNumber, message: '只能是数字' }
    ],
    maxFileSize: [
        { required: true, message: '请输入允许上传的文件大小' },
        { validator: validateNumber, message: '只能是数字' }
    ],
    maxFileCount: [
        { required: true, message: '请输入聊天时单次最大能发送的文件数' },
        { validator: validateNumber, message: '只能是数字' }
    ],
    robotNickName: [
        { required: true, message: '请输入机器人昵称' }
    ],
    avatarFile: [
        { required: true, message: '请选择机器人头像' }
    ],
    robotWelcomeMsg: [
        { required: true, message: '请输入新用户注册机器人欢迎消息' }
    ],
    robotDefaultReply: [
        { required: true, message: '请输入机器人默认回复消息' }
    ]
}

const saveCover = ({ avatarFile, coverFile }) => {
    formData.value.avatarFile = avatarFile;
    formData.value.coverFile = coverFile
};

const robotId = ref('');

const getSysSetting = async () => {
    let result = await proxy.Request({
        url: proxy.Api.getSysSetting,
    })
    if (!result) {
        return;
    }
    formData.value = result.data;
    robotId.value = result.data.robotId;
    formData.value.avatarFile = robotId.value;
}
getSysSetting();

import { useAvatarInfoStore } from "@/stores/AvatarInfoStore"
const avatarInfoStore = useAvatarInfoStore();

const saveSysSetting = async () => {
    formDataRef.value.validate(async (valid) => {
        if (!valid) {
            return;
        }
        let params = {}
        Object.assign(params, formData.value);
        avatarInfoStore.setForceReload(robotId.value, false)
        let result = await proxy.Request({
            method: "put",
            url: proxy.Api.saveSysSetting,
            params
        })
        if (!result) {
            return;
        }
        avatarInfoStore.setForceReload(robotId.value, true)
        proxy.Message.success("系统设置保存成功")
    })
}
</script>

<style lang="scss" scoped>
.form-panel {
    width: 500px;
}
</style>
